<template>
    <div id="app">
        <h3>Example</h3>
        <shawbs-form :model="formData" :rules="rules" ref="form">
            <div>用户名</div>
            <shawbs-form-item prop="username">
                <input type="text" v-model="formData.username">
            </shawbs-form-item>
            <div>密码</div>
            <shawbs-form-item prop="password">
                <input type="text" v-model="formData.password">
            </shawbs-form-item>
            <div>确认密码</div>
            <shawbs-form-item prop="password2">
                <input type="text" v-model="formData.password2">
            </shawbs-form-item>
        </shawbs-form>

        <p>
            <button @click="submit">提交</button>
        </p>
    </div>
</template>

<script>
    export default {
        data(){
            const handle = (e) => {
                if(e == ''){
                    return '确认密码不能为空'
                }
                if(e != this.formData.password){
                    return '两次密码不一致'
                }
            }
            return {
                formData: {
                    username: '',
                    password: '',
                    password2: ''
                },
                rules: {
                    username: [{require: true,message: '用户名不能为空'}],
                    password: [{require: true,message: '密码不能为空'},{reg: /\w{6,8}$/, message: '密码无效'}],
                    password2: [{handle: handle}]
                }
            }
        },
        methods:{
            submit(){
                this.$refs.form.check(valid => {
                    console.log(valid)
                })
            }
        }
    }
</script>

<style lang="less" scoped>

</style>